<template>
    <div class="boundedwork newsafework">
        <div class="content">
            <div class="c-top">
                <div class="c-list">
                    <div class="c-left">
                        项目名称
                    </div>
                    <div class="c-right">
                        <!-- {{dataList.ProjectName}} -->
                        {{userInfo.departsir == 2?userInfo.pdeptname:dataList.ProjectName}}
                    </div>
                </div>
                <div class="c-list">
                    <div class="c-left">
                        申请使用单位
                    </div>
                    <div class="c-right">
                        {{dataList.DeptName}}
                    </div>
                </div>
                <div class="c-list">
                    <div class="c-left">
                        高风险作业区域
                    </div>
                    <div class="c-right">
                        {{dataList.OperationArea}}
                    </div>
                </div>
                <div class="c-list">
                    <div class="c-left">
                        责任人
                    </div>
                    <div class="c-right">
                        {{dataList.PersonLiable}}
                    </div>
                </div>
                <div class="c-l-l">
                    <div class="c-left"
                         style="display:inline-block">
                        设备名称及编号
                    </div>
                    <!-- <textarea readonly
                              v-model="dataList.EquipmentName"
                              class="textarea"></textarea> -->
                    <p class="textarea">{{dataList.EquipmentName}}</p>
                </div>
                <div class="c-l-l">
                    <div class="c-left">
                        额定荷载
                    </div>
                    <!-- <textarea readonly
                              v-model="dataList.RatedLoad"
                              class="textarea"></textarea> -->
                    <p class="textarea">{{dataList.RatedLoad}}</p>
                </div>
                <div class="c-l-l">
                    <div class="c-left"
                         style="display:inline-block">
                        吊物名称及重量
                        <i class="iconfont icon-required"></i>
                    </div>
                    <!-- <textarea readonly
                              v-model="dataList.LiftNameWeight"
                              class="textarea"></textarea> -->
                    <p class="textarea">{{dataList.LiftNameWeight}}</p>
                </div>
                <div class="c-list">
                    <div class="c-left">
                        设备操作人员
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="c-right">
                        {{dataList.DeviceOperator}}
                    </div>
                </div>
                <div class="c-l-l">
                    <div class="c-left"
                         style="display:inline-block">
                        设备操作人员上岗证号
                        <i class="iconfont icon-required"></i>
                    </div>
                    <!-- <textarea readonly
                              v-model="dataList.CardNumber1"
                              class="textarea"></textarea> -->
                    <p class="textarea">{{dataList.CardNumber1}}</p>
                </div>
                <div class="c-list">
                    <div class="c-left">
                        信号司索工
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="c-right">
                        {{dataList.SignalSiSuogong}}
                    </div>
                </div>
                <div class="c-l-l">
                    <div class="c-left"
                         style="display:inline-block">
                        信号司索上岗证号
                        <i class="iconfont icon-required"></i>
                    </div>
                    <!-- <textarea readonly
                              v-model="dataList.CardNumber2"
                              class="textarea"></textarea> -->
                    <p class="textarea">{{dataList.CardNumber2}}</p>
                </div>
                <div class="c-list">
                    <div class="c-left">
                        作业开始日期
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="c-right">
                        {{dataList.StartDate|filterdata}}
                    </div>
                </div>
                <div class="c-list">
                    <div class="c-left">
                        作业结束日期
                    </div>
                    <div class="c-right">
                        <!--<div class="c-select">请选择</div>
                     <img src="../../../../static/images/5.png"  @click="showmsg" >-->
                        {{dataList.EndDate|filterdata}}
                    </div>
                </div>
            </div>

            <!--<div class="c-btn">
             <div class="c-submit">提交</div>

         </div>-->
            <div class="c-bottom">
                <div class="c-title">
                    是否符合开工条件
                </div>
                <div class="c-list"
                     v-for="(item,index) in subProjectsListnew"
                     :key="index">
                    <div class="c-left">
                        {{item['DeptName']}}
                    </div>
                    <div class="c-right">
                        {{subProjectsList["Item"+item.DeptId]}}
                    </div>
                </div>

            </div>
            <div class="c-top">
                <div class="c-l-l">
                    <div class="c-left"
                         style="display:inline-block">
                        其他防护措施
                        <i class="iconfont icon-required"></i>
                    </div>
                    <textarea readonly
                              v-model="dataList.remark"
                              class="textarea"></textarea>
                </div>
            </div>

            <!-- <div class="content-show"
                 v-if="syself">
                <div class="c-l-l">
                    <div class="approvemsg">审批人意见</div>
                    <textarea v-model="ApproveRemark"
                              placeholder="请输入意见（自行换行）"
                              class="textarea"></textarea>
                </div>
            </div> -->
            <!-- <div class="content-show approvemsg"
                 v-if="syself">
                <div class="c-l-ll">
                    <div class="tofirst">
                        审批结论
                    </div>
                    <div class="rightselct">
                        <div class="tofirst"
                             @click="showclick(1)">
                            <div class="selecti"
                                 :class="showmark==1?'active':''"></div>
                            <div>通过</div>
                        </div>
                        <div class="tofirst"
                             @click="showclick(2)">
                            <div class="selecti"
                                 :class="showmark==2?'active':''"></div>
                            <div>不通过</div>
                        </div>
                    </div>

                </div>
            </div> -->

            <!-- 审批信息 -->
            <div class="approveBox"
                 v-if='approveStatus'>
                <div class="approveTit">审批信息</div>
                <div class="approveWrap"
                     v-if='dataList.ApproveInfo.length>0'
                     v-for="(item,index) in dataList.ApproveInfo"
                     :key="index">
                    <div class="form-item form-item-style2">
                        <div class="label-title">
                            <label>审批意见</label>
                        </div>
                        <div>
                            <!-- <textarea class="areainfo"
                                      height="500"
                                      placeholder="请输入审批意见"
                                      v-model="item.Remark"
                                      :disabled="true"></textarea> -->
                            <p class="textarea">{{item.Remark}}</p>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批结论</label>
                        </div>
                        <div class="newcompanyList approvehide">
                            {{item.ApproveResult}}
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批人</label>
                        </div>
                        <div class="newcompanyList approvehide">
                            {{item.ApprovePersonName}}
                        </div>
                    </div>
                </div>
                <div class="approveContent"
                     v-if="syself">
                    <div class="form-item form-item-style2">
                        <div class="label-title">
                            <label>审批意见</label>
                        </div>
                        <div>
                            <textarea class="areainfo"
                                      height="500"
                                      placeholder="请输入审批意见"
                                      v-model="ApproveRemark"></textarea>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批结论</label>
                        </div>
                        <div class="select-section">
                            <div :class="{'active': ApproveResult}"
                                 @click="ApproveResult=true">
                                通过
                            </div>
                            <div :class="{'active': !ApproveResult}"
                                 @click="ApproveResult=false">
                                不通过
                            </div>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批人</label>
                        </div>
                        <div class="newcompanyList approvehide">
                            {{userInfo.username}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="c-btn"
                 v-if="syself">
                <div class="c-submit"
                     @click="submitmessage">提交</div>

            </div>
        </div>
        <myMenu></myMenu>
    </div>
</template>

<script>

import { Group, PopupRadio } from 'vux'
import myMenu from '@/commonComponents/menu'
export default {
    name: 'App',
    directives: {
        // TransferDom
    },
    data () {
        return {
            options1: ['A单位'],
            options2: ['安全类'],
            active: 1,
            showflag: false,
            userId: '',
            tokenId: '',
            projectId: '',
            userInfo: '',
            dataList: {
                id: '', //	String	否	现场危险作业ID
                deptName: '', //	String	否	申请单位名称
                deptId: '', //	String	否	申请单位ID
                startDate: '', //	String	否	作业日期
                endDate: '',
                personId: '', //	String	否	申请人ID
                personName: '', //	String	否	申请人名称
                DismantlingPart: '', //	String	否	拆除部位
                DesignLabel: '', //	String	否	设计砼标号
                remark: '', //	String	否	浇筑砼日期
                PersonLiable: '', //	String	否	责任人
                PersonLiableid: '', //	String	否	责任人ID
                EquipmentName: '', //	String	否	设备名称及编号
                OperationArea: '', // String	否	作业区域	   is
                DeviceOperator: '', //	String	否	设备操作人
                DeviceOperatorid: '', //	String	否	设备操作人ID
                CardNumber1: '',	// String:"", //	否	上岗证号1
                SignalSiSuogong: '', //	String	否	信号司索工
                SignalSiSuogongid: '', //	String	否	信号司索工ID
                CardNumber2: '', //	String	否	上岗证号2
                RatedLoad: '', //	String	否	额定荷载
                LiftNameWeight: '', //	String	否	吊物名称及重量
                MonitoringPath: '', //	String	否	监控图片
                MonitoringPeople: '', //	String	否	监控人员
                MonitoringRemark: '', //	String	否	监控意见
                subProjects: '', //	SubProjectParams	否	分部分项工程信息
                canEdit: '', //	boolean	否	本人是否可以修改（审批，重新提交）
                ProjectName: ''
            },
            subProjectsList: [],
            subProjectsListnew: [],
            checkResult: true,
            ApproveRemark: '',
            showmark: 1,
            syself: false,
            addflag: true,
            approveStatus: false, // 是否展示审批信息
            ApproveResult: true// 审批意见是否通过
        }
    },
    components: {
        Group, PopupRadio, myMenu
    },
    computed: {
    },
    watch: {
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.userId = this.userInfo.userid
        this.tokenId = this.userInfo.tokenId
        this.projectId = this.userInfo.deptid
        // this.syself = this.rolecheck()

        this.getDate()
    },
    methods: {
        rolecheck () {
            // index==1  验证是否是项目施工员  index==2  验证是否是设备管理员
            let arr = []
            let flag = false
            arr = this.userInfo.usermode.split(',')
            arr.forEach(
                (item, index) => {
                    if (item == '项目经理') {
                        flag = true
                    }
                }
            )
            return flag
        },
        getDate () {
            var that = this
            let param = {
                'allowPaging': true,
                'business': 'GetHoistingJob',
                'data': {
                    'id': this.$route.query.id
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    this.dataList = res.data.data
                    this.subProjectsList = res.data.data.SubProjects
                    this.changemove()

                    that.syself = res.data.data.CanEdit
                    if (that.syself || res.data.data.ApproveInfo.length > 0) {
                        that.approveStatus = true
                    }
                }
            )
        },
        changemove () {
            let param = {
                'allowPaging': true,
                'business': 'GetHoistingJobItem',
                'data': {
                    'deptId': this.userInfo.deptid,
                    'deptName': this.userInfo.deptname
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    this.subProjectsListnew = res.data.data
                }
            )
        },

        submitmessage () {
            if (!this.addflag) {
                return false
            }
            this.addflag = false
            let param = {
                'allowPaging': true,
                'business': 'GetHoistingCheck',
                'data': {
                    id: this.$route.query.id, // String 起重吊装作业ID
                    CheckResult: this.ApproveResult, // boolean 是否通过审核
                    ApproveRemark: this.ApproveRemark // String	审批人意见
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$vux.loading.show({
                text: '正在提交中...'
            })
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    if (res.data.code == 0) {
                        // this.$router.push('/workrisk')
                        this.$router.go(-1)
                    } else {
                        this.addflag = true
                    }
                }
            ).catch(
                () => {
                    this.addflag = true
                }
            )
        },
        showclick (index) {
            if (index == 1) {
                this.showmark = 1
                this.checkResult = true
            } else {
                this.showmark = 2
                this.checkResult = false
            }
        }
    },
    filters: {
        filterdata (val) {
            if (!val) {
                return false
            }
            return val.substring(0, 10)
        }
    }
}
</script>

<style scoped lang="less">
.boundedwork {
    background-color: #ebeef3;
    height: 100%;
}
.content {
    // background-color: #ebeef3;
}
.c-top {
    background-color: #fff;
    padding-left: 20px;
}
.c-bottom {
    background-color: #fff;
    padding-left: 20px;
    margin-top: 12px;
    border-bottom: 1px solid #efeff4;
}
.c-list {
    padding: 20px 20px 20px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #efeff4;
}
.c-left {
    color: #333;
    font-size: 14px;
    line-height: 16px;
    position: relative;
}
.c-left > i {
    position: absolute;
    top: -5px;
    right: -18px;
}
.c-right {
    color: #999;
    font-size: 14px;
    // display:flex;
    align-items: center;
    width: 160px;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.c-select {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    // width:200px;
    margin-right: 6px;
    text-align: right;
}
.c-btn {
    height: 113px;
    padding-top: 32px;
}
.c-submit {
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    border-radius: 20px;
    background-color: #2269ff;
    margin: 0 auto;
}
.c-title {
    height: 50px;
    line-height: 50px;
    color: #1f69fc;
}
.selectcheck {
    background-color: #fff;
    // padding-left:20px;
}
.selecticn {
    height: 54px;
    display: flex;
    align-items: center;
}
.iconnew {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #2467ff;
    position: relative;
    margin-right: 10px;
}
.iconnew.checked {
    background-color: #2467ff;
}
.iconnew.checked::before {
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    height: 1.067vw;
    width: 2.133vw;
    position: absolute;
    top: 3px;
    left: 3px;
    content: '';
    -webkit-transform: rotate(-56deg);
    transform: rotate(-51deg);
}
.btnlist {
    background-color: #fff;
    padding-top: 6px;
    padding-left: 25px;
    border-top: 1px solid #ebeef3;
    border-bottom: 1px solid #ebeef3;
    padding-bottom: 26px;
}
.listtop {
    height: 56px;
    line-height: 56px;
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
}
.list-t0 {
    color: #333;
}
.list-t1 {
    color: #666;
}
.firstlist {
    height: 23px;
    line-height: 23px;
    color: #666;
}
.c-btn {
    height: 113px;
    padding-top: 32px;
    background-color: #fff;
}
.c-submit {
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    border-radius: 20px;
    background-color: #2269ff;
    margin: 0 auto;
}
.content-show {
    padding-left: 20px;
    background-color: #fff;
}
.c-l-l {
    height: 95px;
    padding-top: 28px;
    padding-right: 20px;
    border-bottom: 1px solid #ebeef3;
    overflow: hidden;
}
.textarea {
    width: 100%;
    border: 0;
    outline: none;
    margin-top: 10px;
    height: 100%;
    font-size: 14px;
    color: #999;
}
.showlist {
    overflow: hidden;
    margin-bottom: -20px;
}
.newMsg {
    margin-top: 20px;
    padding-right: 20px;
    color: #999;
}
.c-l-ll {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ebeef3;
}
.rightselct {
    display: flex;
}
.tofirst {
    display: flex;
    align-items: center;
    width: 120px;
    height: 55px;
    text-align: center;
    font-size: 14px;
    color: #333;
}
.selecti {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #999;
    margin-right: 10px;
}
.selecti.active {
    border: 3px solid #226afd;
}
.form-item-style1,
.form-item-style2 {
    font-size: 14px;
}
.approvemsg {
    font-size: 14px;
    color: #333;
}
.approveBox {
    border-top: 10px solid #ebeef2;
}
.approveBox .approveTit {
    height: 55px;
    line-height: 55px;
    margin-left: 20px;
    font-size: 15px;
    color: #2269ff;
    border-bottom: 1px solid #efeff4;
}
.approveWrap {
    border-bottom: 10px solid #efeff4;
}
</style>
